<template>

</template>

<script lang="ts">
    import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator'

    @Component({})
    export default class HelloComponents extends Vue {

        // 相当于 data 列表中的属性值
        @Prop(String)
        private username!: string;

        @Prop([String, Number])
        private age!: string | number;

        @Prop({
            type: String, // type: [String , Number]
            default: 'default value', // 一般为String或Number
            required: true,
            validator: (value) => {
                return [
                    'InProcess',
                    'Settled'
                ].indexOf(value) !== -1
            }
        })
        private address!: string;


        /**
         * 可以看到,在@Emit装饰器的函数会在运行之后触发等同于其函数名(驼峰式会转为横杠式写法)的事件, 并将其函数传递给$emit.
         *
         * 如果我们想触发特定的事件呢,比如在emitTodo下触发reset事件
         *
         * 我们只需要给装饰器@Emit传递一个事件名参数reset,这样函数emitTodo运行之后就会触发reset事件.
         *
         * 总结:在Vue中我们是使用$emit触发事件,使用vue-property-decorator时,可以借助@Emit装饰器来实现.@Emit修饰的函数所接受的参数会在运行之后触发事件的时候传递过去.
         *
         * @Emit触发事件有两种写法
         *
         *  @Emit():不传参数,那么它触发的事件名就是它所修饰的函数名.
         *  @Emit(name: string):里面传递一个字符串,该字符串为要触发的事件名.
         */
        @Emit('reset')
        private emitTodo(n: string) {
            console.log('hello');
        }

        // @Watch('child')
        // onChangeValue(newVal: string, oldVal: string){
        //     // todo...
        // }
        //
        // @Watch('person', {immediate: true, deep: true})
        // onChangeValueS(newVal: Person, oldVal: Person){
        //     // todo...
        // }


        mounted() {
            // @Emit() 装饰器下会触发(驼峰式会转为横杠式写法) emitTodo => emit-todo
            this.$on('emit-todo', function (n: string) {
                console.log("hello" + n)
            })

            this.emitTodo('world');
        }

        /**
         * 那么如果是计算属性呢? 这就要用到getter了
         */
        get akm() {
            return this.address + this.age
        }


    }
</script>

<style scoped lang="less">

</style>
